<template>
  <div class="contents">
    <weather></weather>
    <div class="checkpanel">
      <div @click="select('land')">看地块</div>
      <div @click="select('device')">看设备</div>
    </div>
    <!-- <div class="timeItem">
      <div class="timeChose">2023</div>
      <div class="weaInfo">
        <div>
          柘荣天气： {{ realWeatherInfo?.lives[0]?.weather }} &nbsp;
          {{ realWeatherInfo?.lives[0]?.temperature + "c" }}&nbsp;
          {{
            realWeatherInfo?.lives[0]?.windDirection +
            "风" +
            realWeatherInfo?.lives[0]?.windPower
          }}&nbsp;
          {{ "湿度" + realWeatherInfo?.lives[0]?.humidity }}
        </div>
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import http from "@/api/http";
import { env } from "@/utils/env";

import weather from "@/components/weather.vue";
const emit = defineEmits(['select'])
let realWeatherInfo = ref({
  lives: [
    {
      weather: "",
      temperature: "",
      windDirection: "",
      windPower: "",
      humidity: "",
    },
  ],
});
const issue = ref({})
const select = (type) => {
  emit('select', type)
}
onMounted(async () => {
 

});
</script>

<style scoped lang="scss">
.contents {
  position: relative;
}

.maps {
  height: vh(640);
  width: 100%;
}

.weaInfo {
  // width: vw(532);
  height: vh(22);
  background: rgba(14, 54, 62, 0.75);
  border-radius: vh(8);
  padding: vh(4) vw(10);

  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: vh(12);
  color: #2cd7bc;
  line-height: vh(22);

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.checkpanel {
  display: flex;
  z-index: 10;
  margin-top: vh(10);

  div {
    background: rgba(14, 54, 62, 0.75);
    border-radius: 8px;
    border: vh(1) solid #2cd7bc;
    padding: vh(5) vh(10);
    margin-right: vw(10);

    font-size: vh(10);
    color: #ffffff;
    cursor: pointer;
  }
}

.timeItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: absolute;
  top: 0;

  .timeChose {
    width: vw(56);
    height: vh(26);
    background: rgba(44, 215, 188, 0.1);
    border-radius: vw(8);
    border: vh(1) solid #2cd7bc;
    padding: vh(4) vw(10);

    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: vh(14);
    color: #ffffff;
    line-height: vh(26);
  }

  .weaInfo {
    width: vw(532);
    height: vh(32);
    background: rgba(14, 54, 62, 0.75);
    border-radius: vh(8);
    padding: vh(4) vw(10);

    font-family: Source Han Sans CN;
    font-weight: 400;
    font-size: vh(12);
    color: #2cd7bc;
    line-height: vh(32);

    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.infotabs {
  right: 0;
  position: absolute;
  width: vw(401);
  height: vh(68);
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;

  font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: vh(12);
  color: #ffffff;
  line-height: vh(18);
  padding: 0 vw(10);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;

  >div {
    width: 33%;
  }

  .one::before {
    content: "";
    display: inline-block;
    width: vw(8);
    height: vw(8);
    background-color: #58aaf9;
    margin-right: vw(8);
  }

  .two::before {
    content: "";
    display: inline-block;
    width: vw(8);
    height: vw(8);
    background-color: #a76832;
    margin-right: vw(8);
  }

  .three::before {
    content: "";
    display: inline-block;
    width: vw(8);
    height: vw(8);
    background-color: #ed3b3b;
    margin-right: vw(8);
  }

  .four::before {
    content: "";
    display: inline-block;
    width: vw(8);
    height: vw(8);
    background-color: #60ffe9;
    margin-right: vw(8);
  }

  .five::before {
    content: "";
    display: inline-block;
    width: vw(8);
    height: vw(8);
    background-color: #ffc905;
    margin-right: vw(8);
  }

  .six::before {
    content: "";
    display: inline-block;
    width: vw(8);
    height: vw(8);
    background-color: #2ebf27;
    margin-right: vw(8);
  }
}
</style>